<template>
  <div class="app-content">
    <div class="app-margin-top-interval">
      <el-descriptions title="后端程序" :column="1" border>
        <template #extra>
          <svg-icon class="app-tap" @click="close" name="close"/>
        </template>
        <el-descriptions-item label-class-name="app-width-120" label="系统">{{ program.os }}</el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="PHP版本">
          <a href="https://www.php.net/" target="_blank">
            PHP {{ program.php_version }}
          </a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="框架版本">
          <a href="https://hyperf.wiki/3.0/#/" target="_blank">
            hyperf {{ program.hyperf_version }}
          </a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="数据库">
          <a href="https://www.mysql.com/" target="_blank">
            mysql {{ program.mysql_version }}
          </a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="SWOOLE版本">
          <a href="https://www.swoole.com" target="_blank">
            swoole {{ program.swoole_version }}
          </a>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="app-margin-top-interval">
      <el-descriptions title="前端程序" :column="1" border>
        <el-descriptions-item label-class-name="app-width-120" label="技术驱动">
          <a href="https://cn.vuejs.org/guide/introduction.html" target="_blank">
            vue {{ frontend.vueVersion }} ts
          </a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="状态管理">
          <a href="https://pinia.web3doc.top/" target="_blank">Pinia</a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="网络请求">
          <a href="https://www.axios-http.cn/" target="_blank">
            Axios
          </a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="界面UI">
          <a href="https://element-plus.org/zh-CN/" target="_blank">
            Element Plus {{ frontend.elementVersion }}
          </a>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="app-width-120" label="构建工具">
          <a href="https://cn.vitejs.dev/" target="_blank">Vite</a>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="app-margin-top-interval app-margin-bottom-interval">
      <el-alert effect="dark" title="系统运行中" type="success" :closable="false" :description="runLabel"/>
      <el-alert effect="dark" class="app-margin-top-interval" :title="loggerSize" type="error" :closable="false"/>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, computed, ref, version as vueVersion, onMounted} from "vue"
import {getLoggerSizeApi, getSystemInfoApi} from "@/apps/admin/api/basics"
import {FileSizeConvert} from "@/units/company";
import {Sec2Time} from "@/units/time";
import {version as elementVersion} from "element-plus";
import {useCloseMessageBox} from "@/hooks/DialogMsg";

export default defineComponent({
  setup() {
    const close = useCloseMessageBox()

    const loggerSize = ref('本地日志0kb')

    const run = ref(0)

    const program = ref({
      os: "",
      swoole_version: "",
      php_version: "",
      hyperf_version: "",
      mysql_version: ""
    })
    const frontend = ref({
      elementVersion: elementVersion,
      vueVersion: vueVersion,
      viteVersion: 1.2
    })


    const runLabel = computed(() => {
      return Sec2Time(run.value)
    })

    /**
     * 获取日志大小
     */
    function getLogSize() {
      getLoggerSizeApi().then(res => {
        if (res.code === 200) {
          loggerSize.value = '本地日志:' + FileSizeConvert(res.data)
        }
      })
    }


    /**
     * 获取系统信息
     */
    function getSysInfo() {
      getSystemInfoApi().then(res => {
        if (res.code === 200) {
          program.value = res.data.program
          run.value = res.data.run
        }
      })
    }

    onMounted(() => {
      getLogSize()
      getSysInfo()
    })
    return {
      loggerSize,
      runLabel,
      program,
      frontend,

      close
    }
  }
})
</script>